<template>
  <div v-loading="loading">
    <el-row class="edit_game_steps gl_my_10">
      <el-col :span="24">
        <el-steps :active="activeStep" align-center size="mini" :process-status="processStatus" finish-status="success">
          <el-step title="必填信息" />
          <el-step title="组委会信息" />
          <el-step title="赛事基础设置" />
          <el-step v-if="!isEdit" title="赛事完成" />
        </el-steps>
      </el-col>
    </el-row>
    <div class="gl_py_20 edit_game_content">
      <!-- 必填信息 -->
      <required-info v-if="activeStep === 0" ref="requiredInfo" />
      <!-- 组委会信息 -->
      <committee-info v-if="activeStep === 1" ref="committeeInfo" :game-id="gameId" />
      <!-- 赛事基础设置 -->
      <game-setting v-if="activeStep === 2" ref="gameSetting" :game-id="gameId" />
      <!-- 赛事完成 -->
      <div v-if="!isEdit && activeStep === 3" align="center" :game-id="gameId">
        <div class="create_game_success">
          <div class="game_success_icon"><i class="el-icon-circle-check" /></div>
          <div class="game_success_content">赛事创建成功</div>
        </div>
      </div>
    </div>
    <el-row class="gl_mt_10">
      <el-col :span="24" align="center">
        <el-button v-show="showBackBtn" type="default" size="mini" @click="goBack()">返回列表</el-button>
        <el-button v-show="showPrevBtn" type="default" size="mini" @click="prevStep()">上一步</el-button>
        <el-button v-show="showCommitBtn" type="primary" size="mini" @click="submitGameInfo()">提交</el-button>
        <el-button v-show="showCreateEventBtn" type="primary" size="mini" @click="createEvent()">去创建比赛项目</el-button>
        <el-button v-show="showNextBtn" type="default" size="mini" @click="nextStep()">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import requiredInfo from './requiredInfo';
import committeeInfo from './committeeInfo';
import gameSetting from './gameSetting';
export default {
  name: 'EditGame',
  components: {
    requiredInfo,
    committeeInfo,
    gameSetting
  },
  data() {
    return {
      loading: false,
      gameId: '',
      activeStep: 0
    };
  },
  computed: {
    // 当前为新增赛事还是编辑赛事
    isEdit: function() {
      return !!this.$route.params.parentId;
    },
    processStatus: function() {
      return this.activeStep === 3 && 'success' || 'finish';
    },
    showBackBtn: function() {
      return this.activeStep === 0 || this.activeStep === 3;
    },
    showPrevBtn: function() {
      return this.activeStep !== 0;
    },
    showCommitBtn: function() {
      return this.activeStep === 0 || this.activeStep === 2;
    },
    showNextBtn: function() {
      if (this.$route.params.parentId) {
        return this.activeStep !== 2 && this.activeStep !== 3;
      }
      if (!this.gameId && this.activeStep === 0) {
        return false;
      }
      return this.activeStep !== 3;
    },
    showCreateEventBtn: function() {
      return this.activeStep === 3;
    }
  },
  created() {
    this.gameId = this.$route.params.parentId;
    this.activeStep = this.$route.query.activeStep || 0;
  },
  methods: {
    init() {
      this.activeStep = 0;
    },
    submitGameInfo() {
      this.loading = true;
      switch (this.activeStep) {
        // 必填
        case 0:
          this.$refs.requiredInfo.submit().then(res => {
            this.gameId = res.id;
            this.loading = false;
            // 新增完赛事之后，返回赛事列表 by_涂明 date 2020-12-21
            if (!this.$route.params.parentId) {
              this.goBack();
            }
          }, () => {
            this.loading = false;
          });
          break;
        // 赛事基本设置
        case 2:
          this.$refs.gameSetting.submit().then(() => {
            this.loading = false;
          }, () => {
            this.loading = false;
          });
          break;
        default:
          break;
      }
    },
    prevStep() {
      this.activeStep -= 1;
    },
    nextStep() {
      // 赛事编辑和赛事基础信息设置验证页面是否已经有了改动
      switch (this.activeStep) {
        // 赛事必填项
        case 0:
          this.$refs.requiredInfo.validSameData().then(valid => {
            if (!valid) {
              this.$confirm('当前页面存在没有保存的数据，是否确认放弃提交', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.activeStep += 1;
              }).catch(() => {});
              return;
            }
            this.activeStep = 1;
          });
          break;
        // 赛事基本设置
        case 2:
          this.$refs.gameSetting.validSameData().then(valid => {
            if (!valid) {
              this.$confirm('当前页面存在没有保存的数据，是否确认放弃提交', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.activeStep = 2;
              }).catch(() => {});
              return;
            }
            this.activeStep = 2;
          });
          break;
        default:
          this.activeStep += 1;
          break;
      }
    },
    createEvent() {
      this.$router.push({
        name: 'GameCreateEvent',
        params: {
          id: this.gameId
        }
      });
    },
    goBack() {
      this.$router.push({
        name: 'GameManage',
        query: {
          gameType: 'League'
        }

      });
    }
  }
};
</script>
<style>
.edit_game_content {
  min-width: 960px;
  max-width: 1320px;
  min-height: 480px;
  padding: 0 120px;
  margin: 0 auto;
}
.create_game_success {
  padding-top: 10%;
}
.create_game_success .game_success_icon {
  font-size: 100px;
  color: #08b754;
}
.create_game_success .game_success_content {
  font-size: 24px;
  color: #333;
}
</style>
